<template>
  <div id="screen" class="screen">
    <div class="head box_dipaly_flex">
      <div class="big-screen-title">
        <div class="title-left">
          <hamburger
            id="hamburger-container"
            :is-active="sidebar.opened"
            class="hamburger-container"
            @toggleClick="toggleSideBar"
          />
        </div>
        <div class="title-center">
          <span>物联网实训平台</span>
        </div>
        <div class="title-right">
          <div class="right-menu">
            <template v-if="device !== 'mobile'">
              <!-- <span class="url-href"
                    @click="openUrl()">运维管理</span> -->
              <search id="header-search" class="right-menu-item right-margin" />
              <screenfull id="screenfull" class="right-menu-item hover-effect right-margin" />
              <lang-select class="right-menu-item hover-effect right-margin" />
            </template>
            <el-dropdown class="avatar-container right-menu-item hover-effect right-margin" trigger="click">
              <div class="avatar-wrapper">
                <img :src="avatar" class="user-avatar" alt="avatar" />
                <span class="user-name">{{ username }}</span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <router-link to="/profile/index">
                  <el-dropdown-item>
                    {{ $t('navbar.profile') }}
                  </el-dropdown-item>
                </router-link>
                <el-dropdown-item>
                  <span style="display:block;" @click="setting">{{ $t('navbar.setting') }}</span>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <span style="display:block;" @click="deleteCache">{{ $t('navbar.deleteCache') }}</span>
                </el-dropdown-item>
                <el-dropdown-item divided>
                  <span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
                </el-dropdown-item>
                <!-- <el-dropdown-item divided>
                  <span style="display:block;"
                        @click="dialogVisible = true">手动报警</span>
                </el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <el-row class="box_row">
        <el-col :span="6">
          <div class="box_border">
            <div class="box_block">
              <div class="box_block_title box_block_warning_list">
                <span>实时告警</span>
                <!-- <span class="box_block_warning"
                      @click="dialogVisible = true">手动报警</span> -->
              </div>
              <div class="box_block_content">
                <warning-list :new-date="warringNewDate" @alaemDetail="changeWarringList" @openWarning="view" />
              </div>
            </div>
            <div class="box_block">
              <div class="box_block_title"><span>告警信息统计</span></div>
              <div class="box_block_content">
                <warning-statistics :new-date="newDate" />
              </div>
            </div>
            <div class="box_block box_block_bottom">
              <div class="box_block_title"><span>预警已处理统计</span></div>
              <div class="box_block_content">
                <time-warning-handle
                  v-if="isDisplay"
                  :model-data1="timeWarningHandleData1"
                  :model-data2="timeWarningHandleData2"
                  :x-data="xData"
                  :new-date="newDate"
                />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box_border">
            <div class="device_total">
              <div v-for="item in deviceNum" :key="item.label" class="device_total_option">
                <img :src="item.url" />
                <div class="device_total_option_content">
                  {{ item.label }}
                  <span class="device_label">{{ item.value }}</span>
                </div>
              </div>
            </div>
            <div class="box_map">
              <div class="night" target="blank">
                <span class="frame_span"></span>
                <span class="frame_span"></span>
                <span class="frame_span"></span>
                <span class="frame_span"></span>
                <Map v-if="isMap" :device-dictionaries="deviceDictionaries" :warring-list="warringList" />
              </div>
            </div>
            <div class="box_block box_block_bottom box_center_block">
              <div class="box_block_title"><span>预警数据统计</span></div>
              <div class="box_block_content">
                <device-warning :new-date="newDate" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="box_border">
            <div class="box_block">
              <div class="box_block_title"><span>工单统计</span></div>
              <div class="box_block_content">
                <order />
              </div>
            </div>
            <div class="box_block">
              <div class="box_block_title"><span>一周预警趋势</span></div>
              <div class="box_block_content">
                <trend-week :new-date="newDate" />
              </div>
            </div>
            <div class="box_block box_block_bottom">
              <div class="box_block_title"><span>月预警趋势</span></div>
              <div class="box_block_content">
                <trend-month v-if="isDisplay" :x-data="xData" :model-data="trendMonthData" :new-date="newDate" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Map from './component/map.vue'
// import db from '@/utils/localstorage'
import WarningList from './component/warningList.vue'
import WarningStatistics from './component/warningStatistics.vue'
import TimeWarningHandle from './component/timeWarningHandle.vue'
import DeviceWarning from './component/deviceWarning.vue'
import TrendWeek from './component/trendWeek.vue'
import TrendMonth from './component/trendMonth.vue'
import Order from './component/order.vue'
import Hamburger from '@/components/Hamburger'
// import alarmInfo from '@/components/alarmInfo/index'
import { mapActions } from 'vuex'
import db from '@/utils/localstorage'
import Screenfull from '@/components/Screenfull'
import Search from '@/components/HeaderSearch'
// import LangSelect from '@/components/LangSelect'
import elementResizeDetectorMaker from 'element-resize-detector'
import dashboardApi from '@/api/dashboard-manage'
export default {
  components: {
    Map,
    WarningList,
    WarningStatistics,
    TimeWarningHandle,
    DeviceWarning,
    TrendWeek,
    TrendMonth,
    Order,
    Hamburger,
    Screenfull,
    Search
    // LangSelect
    // alarmInfo
  },
  data() {
    return {
      deviceList: [
        {
          label: '无线液化石油气',
          value: 1245,
          imgUrl: '/assets/screen/yhsy-ic.png'
        },
        {
          label: '无线电气火灾',
          value: 1245,
          imgUrl: '/assets/screen/dianqi-ic.png'
        },
        {
          label: '无线烟感',
          value: 1245,
          imgUrl: '/assets/screen/yangan-ic.png'
        },
        {
          label: '天然气',
          value: 1245,
          imgUrl: '/assets/screen/tianranqi-ic.png'
        },
        {
          label: '防火摄像机',
          value: 1245,
          imgUrl: '/assets/screen/shexiang-ic.png'
        }
      ],
      timeWarningHandleData1: [],
      timeWarningHandleData2: [],
      trendMonthData: [],
      xData: [],
      isDisplay: true,
      deviceDictionaries: [],
      deviceNum: [
        {
          label: '天然气',
          value: 168,
          url: require('@/assets/screen/tianranqi-ic-min.png')
        },
        {
          label: '防火摄像机',
          value: 69,
          url: require('@/assets/screen/shexiang-ic-min.png')
        },
        // { label: '无线液化石油气', value: 89, url: require('@/assets/screen/yhsy-ic-min.png') },
        {
          label: '无线电气火灾',
          value: 156,
          url: require('@/assets/screen/dianqi-ic-min.png')
        },
        {
          label: '无线烟感',
          value: 1532,
          url: require('@/assets/screen/yangan-ic-min.png')
        }
      ],
      isMap: true,
      warringList: [],
      wearherData: null,
      screenHeight: document.body.scrollHeight,
      newDate: null, // 用于通知echarts组件重绘
      warringNewDate: null,
      token: '',
      dialogVisible: false,
      testAlertName: ''
    }
  },
  computed: {
    currentUser() {
      return this.$store.state.account.user
    },
    sidebar() {
      return this.$store.state.setting.sidebar
    },
    avatar() {
      return require(`@/assets/avatar/${this.$store.state.account.user.avatar}`)
    },
    username() {
      return this.$store.state.account.user.username
    },
    device() {
      return this.$store.state.setting.device
    }
  },
  mounted() {
    var erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById('screen'), e => {
      this.newDate = new Date()
    })
  },
  created() {
    window.onMessageReceived = this.onMessageReceived
    window.onReplyReceived = function() {}
    window.onConnectFinished = this.onConnectFinished

    // this.deviceTypeDictionaries()
    // this.getAlertYear()
    // this.getWeather()
  },
  methods: {
    ...mapActions({
      setMessage: 'cim/setMessage'
    }),
    toggleSideBar() {
      this.$store.commit('setting/toggleSidebar')
    },
    setting() {
      this.$store.commit('setting/openSettingBar', true)
    },
    logout() {
      this.$delete('auth/signout')
        .then(() => {
          this.clean()
        })
        .catch(() => {
          this.clean()
        })
    },
    clean() {
      db.clear()
      this.$router.push('login')
    },
    deleteCache() {
      this.$confirm(this.$t('tips.confirmDeleteCache'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          db.remove('USER_ROUTER')
          db.remove('PERMISSIONS')
          location.reload()
        })
        .catch(() => {
          // do nothing
        })
    },
    onMeDashboard() {
      this.$router.push('/system/user')
    },
    onDashboard() {
      // this.$post('https://city-api.sensoro.com/developer/login', {
      //   username: '5f6ff49412255f5c7829359e',
      //   password: "eiWRWIn3pjh9HliYHwy4vA78"
      // }).then((res) => {
      //   // debugger
      //   if (res.data.code === 0) {
      //     var newTab = window.open('about:blank');
      //     this.token = res.data.data.token
      //     // var params = {
      //     //   access_token: token,
      //     //   other_header: 'other_header' 'https://city.sensoro.com/login'
      //     // };
      //     var url = 'https://city.sensoro.com/app/dashboard'
      //     newTab.location.href = url;
      //     // this.openPostWindow(url, token, 'newWin')
      //   } else {
      window.open('https://city.sensoro.com/app/dashboard')
      // }

      // })
      //
    },
    getAlertYear() {
      dashboardApi.getAlertCountByYear().then(r => {
        const data = r.data.data
        data.forEach(x => {
          this.xData.push(x.yearDate + '-' + x.monthDate)
          this.timeWarningHandleData1.push(x.alertNum)
          this.timeWarningHandleData2.push(x.alertSolveNum)
          this.trendMonthData.push(x.totalNum)
        })
        this.isDisplay = true
      })
    },
    getDeviceNums() {
      this.$get('/console/api/v1/report/equipment', {
        pageSize: -1,
        pageNum: -1
      }).then(r => {
        const data = r.data.data.rows
        this.deviceNum = data.map(x => {
          return {
            label: this.getTypeStr(x.collectType, false),
            value: x.numberOfEquipment,
            url: this.getTypeStr(x.collectType, true)
          }
        })
        // 取前五个 不然头部放不下
        this.deviceNum = this.deviceNum.slice(0, 5)
      })
    },
    deviceTypeDictionaries() {
      this.$get('system/dict/getDictValueAttr', {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect'
      }).then(r => {
        this.deviceDictionaries = r.data.dictValue
        this.isMap = true
        this.getDeviceNums()
      })
    },
    getTypeStr(type, isUrl) {
      const list = this.deviceDictionaries.filter(x => x.dictValue === type)
      const icon = this.deviceList.filter(x => x.label === list[0].dictText)
      const url = icon.length > 0 ? icon[0].imgUrl : '/assets/screen/question1.png'
      return isUrl ? url : list[0].dictText
    },
    changeWarringList(data) {
      this.warringList = data
    },
    getWeather() {
      this.$get('console/api/v1/cockpit/get-weather').then(r => {
        this.wearherData = r.data.data.result.result
      })
    },
    onReplyReceived(reply) {
      // 上线响应
      if (reply.key === 'client_bind' && reply.code === 200) {
        this.$message.error('账号在其他设备登陆')
      }
    },
    onConnectFinished() {
      // 登陆
      // if (
      //   this.currentUser.userId != undefined &&
      //   this.currentUser.userId != ''
      // ) { }
    },
    onMessageReceived(message) {
      console.log(message)
      message.isClick = false
      // 收消息
      if (message.action === '999') {
        // 账号在其他设备登陆
        this.$message.error('账号在其他设备登陆')
        return false
      }
      const content = JSON.parse(message.content)
      if (content.parkId == this.$store.state.account.user.parkId) {
        this.setMessage(message)
        this.$store.commit('cim/setSystemMsg', message)
        if (message.action === 'system_notify') {
          this.view(content)
        }
      }
    },
    view(item) {
      item.isClick = true
      item['date'] = new Date().toTimeString()
      this.$store.commit('cim/setSystemMsg', item)
      this.warringNewDate = new Date()
      this.$refs['alarmInfo'].visible = true
    },
    dialogClose() {
      this.dialogVisible = false
      this.testAlertName = ''
    },
    testAlert() {
      this.$post('alert/alert/fireHostAlarmManualTest', {
        collectCode: this.testAlertName
      }).then(e => {
        // this.view(e.data)
        this.dialogVisible = false
        this.testAlertName = ''
        this.view(e.data)
      })
    }
  }
}
import './index.scss'
</script>
